<template>
  <div class="home-hero-container container">
    <div class="home-hero">
      <div class="swiper-container home-hero-swiper">
        <div class="swiper-wrapper" @mouseover="mouseoverEvent" @mouseout="mouseoutEvent">
          <div class="swiper-slide" ref="swiper-slide" v-for="(item, index) in banner" :key="index">
            <a href="javascript:;">
              <img :src="item" alt="" class="swiper-lazy swiper-lazy-loaded">
            </a>
          </div>
        </div>
        <div class="swiper-pagination">
          <a href="javascript:;" @click="clickEvent(num)" :class="['swiper-pagination-bullet', index === num ? 'active' : '']" v-for="(item, num) in banner" :key="num"></a>
        </div>
        <div class="swiper-button-prev" @click="clickEvent(--index)"></div>
        <div class="swiper-button-next" @click="clickEvent(++index)"></div>
      </div>
      <div class="home-hero-sub row">
        <div class="span4">
          <ul class="home-channel-list clearfix">
            <li v-for="(item, index) in activity" :key="index">
              <a href="javascript:;">
                <img :src="item.url" alt="">
                {{ item.title }}
              </a>
            </li>
          </ul>
        </div>
        <div class="span16">
          <ul class="home-promo-list clearfix">
            <li v-for="(item, index) in promo" :key="index">
              <a href="javascript:;">
                <img :src="item" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      index: 0,
      speed: 50,
      timer: null,
      banner: [
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e491c83bde043ca4e8ff2d8255dfef.jpg?w=2452&h=920',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3fe21565e2e18ebbec66f83c01d8a9e3.jpg?thumb=1&w=1226&h=460&f=webp&q=90',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e25025f1ebb643fcf7f35aae636aa630.jpg?thumb=1&w=1226&h=460&f=webp&q=90',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg?thumb=1&w=1226&h=460&f=webp&q=90',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg?thumb=1&w=1226&h=460&f=webp&q=90'
      ],
      activity: [
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48',
          title: '小米秒杀'
        },
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48',
          title: '企业团购'
        },
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48',
          title: 'F码通道'
        },
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48',
          title: '米粉卡'
        },
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48',
          title: '以旧换新'
        },
        {
          url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48',
          title: '话费充值'
        }
      ],
      promo: [
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340'
      ]
    }
  },
  mounted () {
    this.setIntervalTime()
  },
  methods: {
    setIntervalTime () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.fadeOut(this.$refs['swiper-slide'][this.index])
        this.index++
        if (this.index > this.banner.length - 1) {
          this.index = 0
        }
        if (this.index < 0) {
          this.index = this.banner.length - 1
        }
        this.$refs['swiper-slide'].forEach(item => {
          item.style.transform = 'translate3d(-' + this.index * 1226 + 'px, 0, 0)'
        })
        this.fadeIn(this.$refs['swiper-slide'][this.index])
      }, 5000)
    },
    fadeOut (el) {
      let num = 10
      var st = setInterval(function () {
        num--
        el.style.opacity = num / 10
        if (num <= 0) clearInterval(st)
      }, this.speed)
    },
    fadeIn (el) {
      let num = 0
      var st = setInterval(function () {
        num++
        el.style.opacity = num / 10
        if (num >= 10) clearInterval(st)
      }, this.speed)
    },
    mouseoverEvent () {
      clearInterval(this.timer)
    },
    mouseoutEvent () {
      this.setIntervalTime()
    },
    clickEvent (index) {
      this.index = index
      if (this.index > this.banner.length - 1) {
        this.index = 0
      }
      if (this.index < 0) {
        this.index = this.banner.length - 1
      }
      clearInterval(this.timer)
      this.setIntervalTime()
      this.$refs['swiper-slide'].forEach(item => {
        item.style.transform = 'translate3d(-' + this.index * 1226 + 'px, 0, 0)'
      })
      this.fadeIn(this.$refs['swiper-slide'][this.index])
    }
  }
}
</script>

<style lang="less" scoped>
.home-hero-container {
  position: relative;
  .home-hero {
    position: relative;
    margin-bottom: 26px;
    .swiper-container {
      margin: auto;
      list-style: none;
      padding: 0;
      z-index: 1;
    }
    .home-hero-swiper {
      position: relative;
      height: 460px;
      overflow: hidden;
      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        box-sizing: content-box;
        .swiper-slide {
          width: 1226px;
          height: 460px;
          text-align: right;
          a {
            display: block;
            &:hover {
              text-decoration: none;
            }
            img {
              display: block;
              width: 1226px;
              height: 460px;
              border: 0;
            }
          }
        }
      }
      .swiper-pagination {
        position: absolute;
        widows: 400px;
        left: auto;
        right: 30px;
        bottom: 20px;
        text-align: right;
        z-index: 999;
        .swiper-pagination-bullet {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin: 0 4px;
          border: 2px solid #fff;
          border-color: hsla(0, 0%, 100%, .3);
          background-color: rgba(0, 0, 0, .4);
          cursor: pointer;
          &:hover {
            background-color: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
          }
          &.active {
            background-color: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
          }
        }
      }
      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        top: 50%;
        width: 41px;
        height: 69px;
        margin-top: -35px;
        z-index: 10;
        cursor: pointer;
        outline: none;
        background: url(//i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -84px 50%;
      }
      .swiper-button-prev {
        left: 234px;
        background-position: -84px 50%;
        &:hover {
          background-position: 0px 50%;
        }
      }
      .swiper-button-next {
        right: 0;
        background-position: -123px 50%;
        &:hover {
          background-position: -41px 50%;
        }
      }
    }
    .home-hero-sub {
      margin-top: 14px;
      .span4,
      .span16 {
        float: left;
        margin-left: 14px;
        min-height: 1px;
      }
      .span4 {
        width: 234px;
        .home-channel-list {
          margin: 0;
          padding: 3px;
          list-style-type: none;
          font-size: 12px;
          text-align: center;
          background-color: #5f5750;
          li {
            position: relative;
            float: left;
            width: 70px;
            height: 82px;
            padding: 0 3px;
            &::before {
              content: "";
              position: absolute;
              background-color: #665e57;
              top: -1px;
              left: 6px;
              width: 64px;
              height: 1px;
            }
            &::after {
              content: "";
              position: absolute;
              background-color: #665e57;
              top: 6px;
              left: 0;
              width: 1px;
              height: 70px;
            }
            a {
              display: block;
              padding-top: 18px;
              text-overflow: ellipsis;
              color: #fff;
              opacity: .7;
              transition: opacity .2s;
              &:hover {
                text-decoration: none;
                opacity: 1;
              }
              img {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0 auto 4px;
                border: 0;
              }
            }
          }
        }
      }
      .span16 {
        width: 978px;
        .home-promo-list {
          margin: 0;
          padding: 0;
          list-style-type: none;
          li {
            float: left;
            width: 316px;
            height: 170px;
            margin-left: 15px;
            transition: box-shadow .2s linear;
            &:first-child {
              margin-left: 0;
            }
            &:hover {
              z-index: 2;
              box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            }
            a {
              display: block;
              height: 170px;
              img {
                display: block;
                width: 316px;
                height: 170px;
                border: 0;
              }
            }
          }
        }
      }
    }
    .row {
      margin-left: -14px;
      &::before,
      &::after {
        content: "";
        display: table;
      }
      &::after {
        clear: both;
      }
    }
  }
}
</style>
